<%@page import="org.proddevplm.dao.data.Roles"%>
<%@page import="org.proddevplm.dao.data.RelationMatrix"%>
<%@page import="org.proddevplm.dao.data.Project"%>
<%@page import="java.util.List"%>
<%@page import="java.util.Map"%>
<%@page import="org.proddevplm.constants.ControllerConstants"%>

<%
	List relMatrix = (List)session.getAttribute("relMatrixUser");
	Project project;
	RelationMatrix rm;
	Roles r;	
%>

<script>
	var flag = false;
	<%if(relMatrix.size()!=0)%> flag = true;
	$(document).ready(function(){
		if(flag){
			$("#myProjects")
				.tablesorter({
			       	widthFixed:true,
			       	debug:false,
			       	widgets:['zebra'],
					headers:{
			      		0 : {sorter: false}
			       	}
			    })
			    .tablesorterPager({container: $("#myProjPager")})
				.tablesorterFilter({filterContainer: "#myProjFilter-box",
	         		filterClearContainer: "#myProjFilter-clear-button",
	                filterCaseSensitive:false,
	                filterColumns: [1,2,3,4,5]
				});
		}
	}); 
</script>

<div style="font-family:verdana; font-size:medium; color:darkblue; text-align:center; margin-top:20px; margin-bottom:20px">My projects</div>

<div align="center">
	<div style="width:auto">

		<div style="float:right; margin-bottom:-10px; text-align:right; ">
			Search table: <input name="filter" id="myProjFilter-box" value="" maxlength="30" size="30" type="text" style="background-color:#E6EEEE">
			<input id="myProjFilter-clear-button" type="submit" value="Clear" style="background-color:#E6EEEE;"/>
		</div>
		<div style="clear:both;"></div>
		<table id="myProjects" class="tablesorter" style="width:100%" rules="rows" frame="hsides" bordercolor="#DBDBDB"> 
			<thead> 
				<tr> 
				    <th>Crt. No.</th> 
				    <th>Project Name</th> 
				    <th>Description</th> 
				    <th>Start date</th> 
				    <th>End date</th>
				    <th>Role in project</th>
				</tr> 
			</thead>
				 
			<tbody> 
				<%
				if(relMatrix != null){
					for (int i=0; i<relMatrix.size(); i++) {
						rm = (RelationMatrix)relMatrix.get(i);
						project = rm.getProject();
						r = (Roles)rm.getRole();%>
						<tr style="height:20px"> 
					    	<td style="width:60px; text-align:center"><%=i+1%></td> 
						    <td style="width:200px">
						    	<a href="/proddev/controller?manager=projectManager&method=2&projectId=<%=project.getId()%>"><%=project.getName()%></a>
						    </td> 
						    <td><%=project.getDescription()%></td> 
						    <td style="width:100px"><%=project.getStartDate()%></td> 
						    <td style="width:100px"><%=project.getEndDate()%></td>
						    <td style="width:200px"><%=r.getRole()%></td>
						</tr>
					<%}
				}%>
			</tbody> 
		</table>
		<div id="myProjPager" class="pager" style="float:right; margin-top:-10px">
			<form>
				<img src="/proddev/images/tablePager/first.png" class="first" width="20" height="20" />
				<img src="/proddev/images/tablePager/previous.png" class="prev" width="20" height="20" />
				<input type="text" class="pagedisplay" style="text-align:center; width:40px; height:20px; background-color:#E6EEEE"/>
				<img src="/proddev/images/tablePager/next.png" class="next" width="20" height="20" />
				<img src="/proddev/images/tablePager/last.png" class="last" width="20" height="20" />
				<select class="pagesize" style="height:20px;">
					<option SELECTED value="5">set paging</option>
					<option value="5">5 per page</option>
					<option value="10">10 per page</option>
					<option value="20">20 per page</option>
					<option value="30">30 per page</option>					
				</select>
			</form>
		</div>	
		<div style="clear:both"></div>
	</div>
</div>
<div style="clear:both"></div>